<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Angular基于模块化实现MVC</title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>

	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table width="800" border="1">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>商品名称</th>
				<th>商品价格</th>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}} </td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>

		<div>
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="spev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}">
					<a href ng-click="selectPage(page)">{{page}}</a>
				</li>
				<li>
					<a href ng-click="next()">下一页</a>
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		var myapp = angular.module("paginationApp", []);
		myapp.controller("paginationCtrl", ["$scope", "$http",
			function($scope, $http) {
				$scope.currentPage = 1;
				$scope.pageSize = 4;
				$scope.totalCount = 0;
				$scope.totalPages = 0;

				$scope.pageList = new Array();

				$scope.spev = function() {
					$scope.selectPage($scope.currentPage - 1);
				}

				$scope.next = function() {
					$scope.selectPage($scope.currentPage + 1);
				}

				$scope.selectPage = function(page) {
					
					if($scope.totalPages!=0 && (page<1 || page>$scope.totalPages)){
						return;
					}
					
					$http({
						method: 'GET',
						url: '6_'+page+'.json',
						params: {
							page:page,
							pageSize:$scope.pageSize
						}
					}).success(function(data, status, headres, config) {
						
						$scope.products = data.products;
						
						$scope.totalCount=data.totalCount;
						$scope.totalPages=Math.ceil($scope.totalCount/$scope.pageSize);
						$scope.currentPage=page;
						
						var begin;
						var end;
						
						begin=$scope.currentPage-5;
						if(begin<1){
							begin=1;
						}
						
						end=begin+9;
						if(end>$scope.totalPages){
							end=$scope.totalPages
						}
						begin =end-9;
						if(begin<1){
							begin=1;
						}
						
						for(var i = begin; i<= end;i++){
							$scope.pageList.push(i);
						}
						
					}).error(function(data, status, headres, config) {
						alert("出错");
					});
				}

				$scope.isActivePage = function(page) {
					return page === $scope.currentPage;
				}
				
				$scope.selectPage(1);
			}
		]);
	</script>

</html>